import { reactive } from "vue";
import { defineStore } from "pinia";

export const useSideBarStore = defineStore(
  "sideBarStore",
  () => {
    //定义响应式状态
    const siderBarState = reactive({
      sidebar: {
        open: true
      },
      a: 1,
      b: 2
    });

    const sidebarstatus = computed(() => siderBarState.sidebar); //计算状态属性

    const toggleSideBar = () => {
      siderBarState.sidebar.open = !siderBarState.sidebar.open;
      console.log("2.点击切换=====", siderBarState.sidebar.open);
    };

    return {
      siderBarState,
      sidebarstatus,
      toggleSideBar
    };
  },

  {
    persist: {
      storage: localStorage, //状态数据持久化保存在本地中
      pick: ["siderBarState.sidebar", "siderBarState.a"] // pick表示获取状态树中那些状态
    }
  }
);
